<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>友情链接</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="title" label="链接标题" />
            <el-table-column prop="url" label="链接网址" />
            <el-table-column prop="create_time" label="添加日期" />

            <el-table-column label="操作" width='180'>
                <template #default="scope">
                    <el-button @click="handleOpenDialog(scope.row)" class="edit" size="small">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                    </el-button>
                    <el-button size="small" type="danger">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 编辑dialog -->
    <el-dialog v-model="dialogVisible" title="编辑标签">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item prop="title" label="链接标题">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item prop="url" label="链接地址">
                <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item prop="link_order" label="显示顺序">
                <el-input v-model="form.link_order" />
            </el-form-item>
            
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit(formRef)">保存</el-button>
            </span>
        </template>

    </el-dialog>
</template>
<script setup>
import { toRefs, reactive, ref, computed, onMounted, onUpdated } from 'vue';
import extension from '../../api/extension';
// import { id } from 'element-plus/es/locale';
// import { ElMessageBox } from 'element-plus';
const dialogVisible = ref(false);
let form = ref({  });

//获取form表单实例化对象
let formRef = ref();
//打开编辑弹窗
let handleOpenDialog = (data, i) => {
    dialogVisible.value = true;
    //还原表单
    form.value = { ...data };
}

const tableData = ref([]);
async function loadList() {
    let { status, msg, total, data } = await extension.link();
    if (status) {
        tableData.value = data;
    }
}
loadList();
const rules = reactive({
    title: [
        { required: true, message: '请输入链接标题！', trigger: 'blur' },
  
    ],
    url: [
        { required: true, message: '请输入链接地址！', trigger: 'blur' },
      
    ],
    link_order: [
        { required: true, message: '请输入顺序！', trigger: 'blur' },
    ], 
});
function handleEdit(formEl) {
    //表单验证
    formEl.validate(async(valid,fields) => {
        //通过验证
        if (valid) {
            //发送ajax
         let{status,msg} = await extension.friend(form.value.id,{...form.value});
         if(status){
            //修改成功
            //操作DOM 
    tableData.value[form.value.id-1]={...form.value};
            //关闭弹窗，消息提示
            dialogVisible.value = false;
            ElMessage.success(msg);
         }else{
            //错误提示
            ElMessage.error(msg);
         }
          
        }else{
            console.log('失败字段', fields);
        }
    });
}

</script>
    
<style lang="less">
.edit {
    background-color: rgb(143, 190, 231);
}
</style>